<template>
  <!-- 视频信息标签 -->
  <div class="p-4 bg-transparent rounded-lg shadow-sm">
    <!-- 视频作者 -->
    <p class="text-2xl mb-2 text-start text-white font-semibold">
      @{{ video.author_name }}
    </p>

    <!-- 视频标题和标签容器 -->
    <div class="flex flex-wrap items-center gap-2">
      <!-- 视频标题 -->
      <h4 class="text-xl text-white">
        {{ video.title }}
      </h4>

      <!-- 视频标签 -->
      <div class="flex flex-wrap gap-2">
         <span v-for="tag in video.tag_names" :key="tag" class="text-xl text-yellow-100">
          #{{ tag }}
          </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Video } from '@/services/video/video.types';

defineProps<{
  video: Video
}>()
</script>
